<template>
  <div id="keySupervision" ref="keySupervision" class="keySupervision"></div>
</template>

<script>
export default {
  props: {
    pieProcess: {},
  },
  data() {
    return {};
  },
  components: {},
  mounted() {
    // this.echartsInit();
  },
  beforeDestroy() {},
  methods: {
    echartsInit() {
      this.$echarts.init(this.$refs.keySupervision).setOption({
        title: {
          show: true,
          text: this.pieProcess.pieTit,
          subtext: this.pieProcess.pieNum + "%",
          itemGap: this.pieProcess.titleitemGap || 3,
          left: "45%",
          top: "30%",
          subtextStyle: {
            color: "#34EFFE",
            fontSize: 16,
            fontWeight: 600,
          },
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          textAlign: "center",
        },
        color: this.color,

        series: [
          {
            name: "重点监管",
            type: "pie",
            max: 100,
            radius: ["65%", "80%"],
            center: ["48%", "50%"],
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            emphasis: {
              label: {
                color: "#fff ",
                show: false,
                fontSize: "12",
                fontWeight: "bold",
              },
            },
            hoverAnimation: false,
            data: [
              {
                value: this.pieProcess.pieNum, // 需要显示的数据
                itemStyle: {
                  borderRadius: "10%",
                  color: this.pieProcess.colorStops
                    ? {
                        type: "linear",
                        colorStops: this.pieProcess.colorStops,
                      }
                    : this.pieProcess.color, //圆环颜色
                },
              },
              {
                value: 100 - this.pieProcess.pieNum,
                itemStyle: {
                  normal: {
                    color: "#395d87",
                  },
                },
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.keySupervision {
  width: 119px;
  height: 125px;
}
</style>
